import CreateForm from '@/pages/BatchOrderList/components/CreateForm';
import UpdateForm from '@/pages/BatchOrderList/components/UpdateForm';
import { delOrder, orders } from '@/services/ant-design-pro/api';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { PageContainer, ProTable } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import { Button, message, Modal } from 'antd';
import dayjs from 'dayjs';
import React, { useRef } from 'react';

const BatchOrderTable: React.FC = () => {
  const actionRef = useRef<ActionType>();
  const [messageApi] = message.useMessage();
  /**
   * @en-US International configuration
   * @zh-CN 国际化配置
   * */
  const intl = useIntl();

  const delItem = (rowId: number) => {
    Modal.confirm({
      title: '确认要删除吗',
      async onOk() {
        await delOrder(rowId);
        messageApi.success('删除成功');
        actionRef.current?.reload();
      },
    });
  };

  const columns: ProColumns<API.BatchOrder>[] = [
    {
      title: '订单编号',
      search: false,
      dataIndex: 'orderNo',
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
      search: false,
      render: (text, record: API.BatchOrder) => {
        return dayjs(record.createdAt).format('YYYY-MM-DD HH:mm:ss');
      },
    },
    {
      title: '更新时间',
      dataIndex: 'updatedAt',
      search: false,
      render: (text, record: API.BatchOrder) => {
        return dayjs(record.updatedAt).format('YYYY-MM-DD HH:mm:ss');
      },
    },
    {
      title: '公司名称',
      dataIndex: 'companyName',
      search: false,
    },
    {
      title: '联系电话',
      dataIndex: 'contactNo',
      search: false,
    },
    {
      title: '备注',
      dataIndex: 'remark',
      search: false,
    },
    {
      title: '操作',
      dataIndex: 'option',
      search: false,
      render(text, record) {
        return [
          <Button type="link" key={`item-${record.rowId}`} onClick={() => {}}>
            <a rel="noreferrer" href={`editPage/${record.rowId}`} target={'_blank'}>
              编辑
            </a>
          </Button>,
          <Button type="link" key={`modify-${record.rowId}`}>
            <UpdateForm
              record={record}
              key="修改"
              onConfirm={() => {}}
              reload={() => {
                actionRef.current?.reload();
              }}
            ></UpdateForm>
          </Button>,
          <Button
            type="link"
            key={`del-${record.rowId}`}
            onClick={() => {
              delItem(record.rowId);
            }}
          >
            删除
          </Button>,
        ];
      },
    },
  ];
  return (
    <PageContainer>
      <ProTable<API.BatchOrder, API.PageParams>
        headerTitle={intl.formatMessage({
          id: 'pages.searchTable.title',
          defaultMessage: 'Enquiry form',
        })}
        actionRef={actionRef}
        rowKey="key"
        search={{
          labelWidth: 120,
        }}
        toolBarRender={() => [
          <CreateForm
            key="create"
            onConfirm={() => {}}
            reload={() => {
              actionRef.current?.reload();
            }}
          ></CreateForm>,
        ]}
        request={orders}
        columns={columns}
      />
    </PageContainer>
  );
};

export default BatchOrderTable;
